<template>
  <div v-show="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div class="view-equip-title">入库详情</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库单号</div>
            <div class="text">{{ formValue.inNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库人</div>
            <div class="text">{{ formValue.inboundName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">修改人</div>
            <div class="text">{{ props.updateName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库时间</div>
            <div class="text">{{ formValue.inDate || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ formValue.classNameDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">种类</div>
            <div class="text">{{ formValue.categoryDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">来源</div>
            <div class="text">{{ formValue.sourceDesc || "-" }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">PO单号</div>
            <div class="text">{{ formValue.billNum || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">入库列表</div>
      <px-table :data="formValue.inventoryDetailDTOList" class="equip-table" size="small" height="350" border>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import { getSparePartsWarehousing } from "@/api/equip/spareParts";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "sparePartsId", "updateName"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {
    inNum: "",
    inboundName: "",
    inDate: "",
    classNameDesc: "",
    systemValDesc: "",
    sourceDesc: "",
    billNum: "",
    remark: "",
    inventoryDetailDTOList: []
  },
  tableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartCode", label: "编码", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartName", label: "名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "100", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "100", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "100", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "100", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "100", showOverflowTooltip: true },
    { prop: "currentStock", label: "库存量", minWidth: "100", showOverflowTooltip: true },
    { prop: "quantity", label: "入库数量", minWidth: "100", showOverflowTooltip: true }
  ]
});
const { formValue, tableColumns } = toRefs(state);
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    const params = {
      id: props.sparePartsId
    };
    const data = await getSparePartsWarehousing(params);
    formValue.value = data;
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
.view-equip-detail-wrap {
  // position: relative;
  width: 100%;
  height: 100%;

  .view-equip-detail {
    padding-bottom: 24px;
  }
}
</style>
